<template>
  <div class="about">
    <h1>This is an about page</h1>
    <hr>
    <p>data取数据：{{username0}}</p>
    <p>直接取用户名：{{this.$store.state.username}}</p>
    <p>通过计算属性取用户名：{{username}}</p>
    <img :src="avatar" alt="头像" width="200px">
    <p>{{token}}===>{{role}}</p>
    <input v-model="loginName">
    <button @click="updateName">展示</button>
  </div>
</template>
<script>
import {mapState} from "vuex";

export default{
  name: 'About',
  data(){
    return{
      avatar:this.$store.state.avatar,
      username0:this.$store.state.username,
      loginName:''
    }
  },
  // computed:{
  //   username(){
  //     return this.$store.state.username
  //   }
  //   ,
  //   token(){
  //     return this.$store.state.token
  //   },
  //   role(){
  //     return this.$store.state.role
  //   }
  // }
  //使用mapState
  // computed:mapState({
  //   username(state){
  //     return state.username
  //   }
  // })
  //mapState简化版
  computed:mapState(['username','token','role']),
  methods:{
    updateName(){
      this.$store.commit('updateUsername',this.loginName)
    }
  }

}
</script>

